<template>
	<view class="app">
		<load :ready="ready"></load>

		<template v-if="info">

			<view class="order-warp">
				<view class="goods-list">
					<view class="item">

						<u-image width="180rpx" height="180rpx"
							src="https://gd2.alicdn.com/imgextra/i2/2215662838540/O1CN01lZHk5a2CxNG0LKG5x_!!2215662838540.jpg"></u-image>
						<view class="info">
							<view class="name">商品名</view>
							<view class="text txt-hide2">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</view>
							<view class="btnbox">
								<view class="price">￥<text>100</text></view>
								<view class="view">
									<u-number-box size="24" input-width="60"  v-model="form.num" @change="valChange"></u-number-box>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_add.png" mode="widthFix" class="icon"></image>
					<text>配送地址</text>
				</view>
				<view class="addres-wrap">
					<view class="info">
						<view class="addhead">
							<text class="name">崔文豪</text>
							<text class="mobile">13580052553</text>
						</view>
						<view class="text">
							广东省广州市番国区钟村街道几岁理解
							<!-- {{info.order.hospitalName}}{{info.order.departments}}{{info.order.floor}}{{info.order.bed}} -->
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="ibox">
				<view class="titlebox" style="padding-bottom: 0;">
					<image src="/static/icon_state3.png" mode="widthFix" class="icon"></image>
					<text>开户合同</text>
				</view>
				<view class="-mlr-32rpx">
					<u-cell-group :border="false">
						<u-cell-item :border-bottom="false" @click="link('./signing')" title="喜威新增钢瓶电子合同" value="去签约">
						</u-cell-item>
					</u-cell-group>
				</view>
			</view> -->

			<view class="ibox">
				<view class="titlebox" style="padding-bottom: 0;">
					<image src="/static/icon_invoice.png" mode="widthFix" class="icon"></image>
					<text>下单信息</text>
				</view>
				<u-form :model="form" label-position="left" labelWidth="140" ref="uForm">
					<u-form-item label="配送时间" >
							立即配送
					</u-form-item>
				<!-- 	<u-form-item label="楼层费" >
						<u-input v-model="form.stair"  placeholder="步梯2楼收1元，2楼以上每层加收1元"
							type="select" />
					</u-form-item> -->
					<!-- <u-form-item label="优惠券" >
						<u-input v-model="form.sex"  placeholder="请选择优惠券"
							type="select" />
					</u-form-item> -->
					<!-- <u-form-item label="发票信息" >
						<u-input v-model="form.sex"  placeholder="请选择发票信息"
							type="select" />
					</u-form-item> -->
					<view class="recovery-label">
						<view class="recovery-name">
							是否需要旧瓶回收服务
						</view>
						<view class="recovery-tips">
						“重要：钢瓶回收折价说明
						</view>
					</view>
					<u-form-item label=" " label-position="top">
						<u-radio-group v-model="form.recovery">
							<u-radio v-for="(item, index) in isRecovery" :key="index" :name="item.value" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="备注" :border-bottom="false" label-position="top">
						<u-input v-model="form.content"  placeholder="选填：给商家的留言信息"
							type="textarea" />
					</u-form-item>
				</u-form>
			</view>
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_trolley.png" mode="widthFix" class="icon"></image>
					<text>商品增购</text>
				</view>
				<view style="margin: 0 -30rpx;">
					<scroll-view class="scrollx" scroll-x="true" >
						<view class="scrollx-item"  @click="link('./goods_info?id=1')">
							<u-image width="260rpx" height="240rpx" 
								src="/static/pj1.png"></u-image>
							<view class="info">
								<view class="name">商品名</view>
								<view class="btnbox">
									<view class="price">￥<text>100</text></view>
									<view class="numberbox">
										<u-number-box size="24" input-width="60" v-model="value" @change="valChange"></u-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="scrollx-item"  @click="link('./goods_info?id=1')">
							<u-image width="260rpx" height="240rpx" 
								src="/static/pj2.png"></u-image>
							<view class="info">
								<view class="name">商品名</view>
								<view class="btnbox">
									<view class="price">￥<text>100</text></view>
									<view class="numberbox">
										<u-number-box size="24" input-width="60" v-model="value" @change="valChange"></u-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="scrollx-item"  @click="link('./goods_info?id=1')">
							<u-image width="260rpx" height="240rpx" 
								src="/static/pj1.png"></u-image>
							<view class="info">
								<view class="name">商品名</view>
								<view class="btnbox">
									<view class="price">￥<text>100</text></view>
									<view class="numberbox">
										<u-number-box size="24" input-width="60" v-model="value" @change="valChange"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_wallet.png" mode="widthFix" class="icon"></image>
					<text>付款信息</text>
				</view>
				

				<view class="desc-text">
					<view class="label">共享瓶押金</view>
					<view class="value">¥{{info.order.totalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">钢瓶使用费(年)</view>
					<view class="value">¥{{info.order.totalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">气价</view>
					<view class="value">¥{{info.order.totalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">商品增购</view>
					<view class="value">¥{{info.order.totalPrice}}</view>
				</view>
				<!-- <view class="desc-text">
					<view class="label">优惠券扣减</view>
					<view class="value">-¥{{info.order.totalPrice}}</view>
				</view> -->
				<view class="desc-text">
					<view class="label">实际付款金额</view>
					<view class="value">¥{{info.order.actuallyPrice}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
			
			<view style="height: 120rpx;"></view>
			<view class="order-foot">
				<view class="total">支付合计：￥<text>99</text></view>
				<view class="right">
					<u-button class="btn" @click="submit()" type="success" hover-class="none" :custom-style="{
						...btnStyle,
					}">确认提交</u-button>
				</view>
			</view>
		</template>
		
			<u-select v-model="showStair" :list="stairList" @confirm="confirm($event,'stair')"></u-select>
			
		<u-modal v-model="showTips" @confirm="nextSubmit" :show-cancel-button="true" :content="`已超出今日配送时间段，订单可能于明天早上进行配送，是否继续下单，如继续下单则订单配送时间为${nextDate.result} 9:00~12:00 ？`"></u-modal>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			let myDate = new Date();
			let  stairList = [];
			for(let i=1;i<15;i++){
				stairList.push({
					label:`${i}楼`,
					value:i,
				})
			}
			
			return {
				isRecovery: [{
						name: '是',
						value: 1,
						disabled: false
					},
					{
						name: '否',
						value: 0,
						disabled: false
					}
				],
				// ready: false,
				btnStyle: {
					background: '#497CD0',
					borderRadius: '8px',
					padding: '0 25px',
				},
				id: null,
				// info:null,
				info: {
					order: {},
				},
				orderRemark: '',
				showShip: true,
				form:{
					num:1,
				},
				value:0,
				myDate,
				date: myDate.getHours(),
				maxDate: 16,
				showTips:false,
				nextDate:this.$dateUitl.getDateStr(1),
				stairList,
				showStair:false,
			};
		},
		onLoad(o) {
			that = this;
			if (o.id) {
				this.id = o.id
				// this.getLogCompany();
			}
		},
		onReady() {},
		onShow() {
			// this.getInit();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			confirm(e, name){
				if(name == 'stair'){
					this.form.stairData = e[0]; 
					this.form.stair = e[0].label; 
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				if(this.date > this.maxDate){
					this.showTips = true;
					return
				}
				uni.redirectTo({
					url: '/pages/user/order_info?id=184',
				});
			},
			async nextSubmit() {
				let res = await this.$api.logCompany();
				if (res.data.code == this.$config.RESOK) {
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getInit() {
				let res = await this.$api.agencyOrderDetail({
					orderId: this.id
				});
				if (res.data.code == this.$config.RESOK) {
					let info = res.data.data;
					this.info = info;
					this.ready = true;
				} else {
					this.$message.error(res.data.msg);
				}
			},
			radioGroupChange() {

			},
			radioChange() {

			},
			handleTab(e) {
				this.tab = e;
			},
			change(e) {
				this.current = e;
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.order-warp {
		background: #497CD0;
		padding: 24rpx 32rpx;

		.state {
			display: flex;
			color: #fff;
			align-items: center;

			.icon {
				width: 28px;
				height: 28px;
			}

			text {
				margin-left: 6px;
				font-size: 20px;
			}
		}


	}

	.ibox {
		background: #fff;
		margin: 16rpx 32rpx;
		border-radius: 12px;
		padding: 0 32rpx;

		.log-item {
			display: flex;
			align-items: center;
			padding: 4px 0;

			text {
				margin-right: 10px;
			}

			.icon-copy {
				width: 18px;
				height: 18px;
			}
		}
	}

	.titlebox {
		display: flex;
		padding: 28rpx 0;
		align-items: center;

		.icon {
			width: 18px;
			height: 18px;
		}

		text {
			margin-left: 5px;
			font-size: 16px;
		}
	}

	.goods-list {
		border: 0;
	}

	.desc-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #8E8E9A;
		padding: 4px 0;
	}

	.order-foot {
		padding: 10rpx 30rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 0 20px #ddd;
		.total{
			color: #333;
			text{
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
	.send-popup {
		padding: 20rpx 30rpx;
		position: relative;

		.btn-close {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}

		.title {
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}

		.item {
			margin-bottom: 20rpx;
		}

		.label {
			font-size: 14px;
			margin-bottom: 6px;
		}

		.btnbox {
			padding-top: 30rpx;
		}
	}

	.attrbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 2px 0;
		color: #666;

		.attr-name {
			width: 80%;
			font-size: 12px;
		}

		.num {}
	}

	.sell {
		padding: 10px 0;
		color: #666;
	}

	.goods-list {
		background: #fff;
		border-radius: 5px;
		padding: 20rpx;
	}

	.addres-wrap {
		background: #fff;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;

		.name {
			margin-right: 12px;
		}

		.addhead {
			margin-bottom: 4px;
		}

		.text {
			font-size: 14px;
		}
	}
	.recovery-label{
		line-height: 22px;
		padding-top: 16rpx;
		display: flex;
		.recovery-name{
			font-size: 14px;
		}
		.recovery-tips{
			font-size: 12px;
			color: $color;
			text-decoration: underline;
			margin-left: 4px;
		}
	}
	
	.scrollx-item{
		display: inline-block;
		margin-left: 20rpx;
		&:nth-last-child(1){
			margin-right:20rpx
		}
		.info{
			padding: 10rpx 0 20rpx;
		}
		.name{
			font-size: 14px;
			margin-bottom: 5px;
		}
		.price{
			font-size: 12px;
			text{
				font-size: 14px;
			}
		}
		.btnbox{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>